<template>
  <div class="paging" v-if="props.total > props.pageSize">
    <div class="paging_tal">共{{props.total}}条</div>
    <el-pagination
      @change="pageChange"
      v-model:page-size="props.pageSize"
      v-model:current-page="page"
      prev-text="上一页"
      next-text="下一页"
      background
      layout="prev, pager, next"
      :total="props.total"
      :hide-on-single-page="true"
    />
    <div class="paging_operation">
      <span class="paging_operation_1">前往第</span>
      <input class="paging_operation_2"
        v-model="inputPage"
        @input="inputChange"
        onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
        type="number" 
        placeholder="1" 
        maxlength="3" />
      <span class="paging_operation_3">页</span>
      <div class="paging_operation_4" @click="queryClick">确定</div>
    </div>
  </div>
</template>

<script setup name="paging">
import { ref, reactive } from "vue";
const props = defineProps({
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 10,
  }
});

let page = ref(1);
const emit = defineEmits(['pageChange'])
function pageChange() {
  inputPage.value = 1;
  emit('pageChange', page.value)
}

let inputPage = ref(1);
function inputChange() {
  let num = Math.ceil(props.total / props.pageSize);
  if (inputPage.value > num) {
    inputPage.value = num;
  }
}
function queryClick() {
  if (inputPage.value != page.value) {
    page.value = inputPage.value;
    console.log(page.value)
    emit('pageChange', page.value);
  }
}
</script>



<style lang="scss" scoped>
.paging {
  display: flex;
  align-items: center;
  justify-content: center;
  // margin: 20px 0 0;
  .paging_tal {
    font-size: 7px;
    padding: 3px 4px;
    margin-right: 4px;
  }
  .paging_operation {
    display: flex;
    align-items: center;
    .paging_operation_1 {
      margin: 0 3px 0 12px;
      font-size: 7px;
    }
    .paging_operation_2 {
      width: 16px;
      height: 16px;
      font-size: 7px;
      border: 1px solid rgba(0, 0, 0, 0.149);
      text-align: center;
      outline: none;
    }
    .paging_operation_3 {
      margin: 0 3px;
      font-size: 7px;
    }
    .paging_operation_4 {
      border: 1px solid rgba(0, 0, 0, 0.149);
      border-radius: 2px;
      width: 32px;
      height: 16px;
      font-size: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
</style>
